<template>
  <transition name="message-fade">
    <div
      :class="`message message-${type} ${center ? 'is-center' : ''} }`"
      :style="{ top: offset + 'px' }"
      v-if="isShow"
    >
      <p class="message-content">{{ translateType() }}：{{ message }}</p>
      <i class="icon icon-close"></i>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Message",

  data() {
    return {
      message: "默认信息",
      type: "info",
      center: true,
      offset: 20,
      isShow: true,
      duration: 1000,
      timer: null,
      onClosed: null,
    };
  },

  mounted() {
    this.timer = setTimeout(() => {
      if (this.isShow) {
        this.close();
      }
    }, this.duration);
  },

  methods: {
    close() {
      this.isShow = false;

      typeof this.onClosed === "function" && this.onClosed();
    },
    translateType() {
      if (this.type === "info") return "提示";
      if (this.type === "success") return "成功";
      if (this.type === "warning") return "警告";
      if (this.type === "error") return "错误";
    },
  },
};
</script>

<style></style>
